還沒學到這個屬性之前，一直以為必須使用到JavaScript，才能讓網頁有動畫的效果，沒想到用CSS也可以做出動畫的效果。只要會運用transition和animation這兩個CSS屬性，就可以產生很多不同的動畫效果了。
因為transition比起animation用法比較好理解，且部分屬性概念有重疊，所以就著重於整理比較容易忘記的animation屬性筆記。

Animation 屬性

animation 屬性是以下幾個屬性的縮寫:

• animation-name 動畫名稱
• animation-duration 動畫播放時間
• animation-delay 動畫延遲播放時間
• animation-iteration-count 動畫播放次數
• animation-fill-mode 設定最終停留位置
• animation-direction 動畫播放方向
• animation-play-state 動畫播放或暫停狀態
• animation-timing-function 動畫加速度函式

CSS Animation 語法

animation:name duration | timing-function | delay | iteration-count | direction | fill-mode | play-state;

animation-name 命名時要注意的事

• animation-name 屬性是用來指定一個或多個@keyframes所使用的動畫名稱，如果沒有設定animation-name，就不會產生出動畫效果。
• initial 和 None是CSS動畫的保留字，不能使用這兩個字作為動畫名稱。

div {
  animation-name: move;
}

相關資料: 4.2. The animation-name property

animation-duration 動畫播放時間設定

animation-duration 指的是「播放一次」動畫需要的時間，單位為 秒 ( s ) 或毫秒 ( ms )，預設值 0s，如果沒有設定或將其設為 0s，就不會播放動畫，基本上和 animation-name 動畫名稱都是屬於一定要有的屬性。

div {
  animation-duration: 5s;
}

animation-delay 動畫延遲播放時間

設定動畫開始之後延遲的時間
比較少會使用到，通常用在設定了有很多動畫效果的時候
例如:
動畫在兩秒後才會開始執行

animation-delay: 2s;

如果延遲播放時間是負數，例如 -1s、-2s，效果會從延遲變成快轉，假設動畫播放時間是設定 5 秒，animation-delay 設定為 -2s，動畫就會從第二秒開始播放，播放三秒後結束。

animation-iteration-count 動畫播放次數

預設是 1，也可以設定成infinite(無限次執行)。
但如果設定成infinite，會建議設置在比較小的區塊，避免吃效能

例如:

設定動畫只會播放兩次

div {
  animation-iteration-count: 2;
}

animation-fill-mode 設定動畫最終停留位置

• animation-fill-mode: none; 預設值，不論動畫播放次數，結束後一律返回原始狀態。
• animation-fill-mode: forwards; 停留在最後的一個位置
• animation-fill-mode: backwards; 停留在起始位置
• animation-fill-mode: both; 此設定值會依照動畫播放次數或是播放方向，停留在起始位置或最後位置

animation-direction 動畫播放方向

animation-direction 屬性定義動畫是正常播放、倒轉播放或是其它方式

• normal：正常播放
• reverse：倒轉播放
• alternate：正反轉輪流播放，如果動畫播放次數是預設就只會正常播放。
• alternate-reverse：alternate 的相反

例如:
設定先正常播放，後倒轉播放

div {
  animation-direction: alternate;
}

animation-play-state 動畫播放或暫停狀態

• animation-play-state:running; 預設值，表示動畫正常執行。可搭配滑鼠 hover 的效果使用
• animation-play-state:paused; 設定動畫暫停。

animation-timing-function 設定動畫播放的速度曲線

• animation-timing-function:ease; 預設是ease 從慢到快 最後會是慢速結束
• animation-timing-function:ease-in; 從慢到快
• animation-timing-function:ease-out; 從快到慢
• `animation-timing-function: linear; 從開始到結束速度都一致
  ...其它設定值可以參考 CSS animation-timing-function Property

製作動畫必備的@keyframes(關鍵影格)

animation屬性會搭配@keyframes一起使用來產生動畫效果

例如:

範例一

div{
width:100px; 
height:50px; 
background-color: red; 
animation-name: example; 
animation-duration: 3s; 
position:relative; 

@keyframes example {
  from{ 
  background-color: red;  left:0px; top:0px; 
  }
  to {
  background-color: blue; left:0px; top:0px; 
  }
}

範例二

.element {
  animation: pulse 5s infinite;
}

@keyframes pulse {
  0% {
    background-color: #001F3F;
  }
  100% {
    background-color: #FF4136;
  }
}

@keyframes 語法

@keyframes animationName {
  keyframes-selector {
    /* css-styles */
  }
}

用from / 0% 表示動畫的起始，to / 100% 表示動畫的結束

好用的動畫套件

• Animate.css
• AOS

參考資料:
完整解析 CSS 動畫 ( CSS Animation ), 理解animation-fill-mode属性, Day27：小事之 Transition 與 Animation

以上為個人學習筆記整理
若有錯誤，歡迎指正